<template>
  <div class="content">
    <div class="kong"></div>
    <div
      class="list"
      v-for="(item,index) in info"
      :key="index"
      @click="listBuy(item)"
    >
      <img class="backgroundImg" :src="item.backgroundImg" />
      <div class="listMiddle">
        <p>{{item.marketingName}}</p>
        <span>{{item.content}}</span>
      </div>
      <div class="listPositioning">
        <P>￥{{item.amount}}</P>
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_BY_PROVIDERID_PAGEAPI } from '@/api'

export default {
  components: {},

  data () {
    return {
      info: [],
      infoHitn: [
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/qfx.png',
          marketingType: 'SHARE',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/marketing/marketing-icon5.png',
          label: '趣分享'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/pt.png',
          marketingType: 'GROUP',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/marketing/marketing-icon6.png',
          label: '拼团'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/xdfw.png',
          marketingType: 'DIS',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/marketing/marketing-icon4.png',
          label: '信贷服务'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/bghk.png',
          marketingType: 'REPAY',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/marketing/marketing-icon1.png',
          label: '布谷还款'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/bgsk.png',
          marketingType: 'RECEIPT',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/marketing/marketing-icon2.png',
          label: '布谷收款'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/bgsk.png',
          marketingType: 'SECOND_KILL',
          backgroundImg:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/marketing_green.png'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/yhq.png',
          marketingType: 'REWARD_OPEN_SHOP'
        },
        {
          src: 'https://akk.028wkf.cn/kdb-weapp-img/img/yhq.png',
          marketingType: 'REWARD_REGISTER'
        }
      ]
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this._findProviderid()
  },
  methods: {
    listBuy (value) {
      let data = JSON.stringify(value)

      this.$dialog('现在购买，立即开通“' + value.marketingName + '”').then(
        () => {
          this.$cookie.set('buyInfo', data)
          this.$router.push('/pages/shop-management/marketing-pay-tool/main')
        }
      )
    },
    _findProviderid () {
      FIND_BY_PROVIDERID_PAGEAPI(this.account.providerId, 1, 99)
        .then(r => {
          if (r.data.code === '0') {
            let data = [...r.data.data.list]

            data.forEach(_ => {
              this.infoHitn.forEach(e => {
                if (_.marketingType === e.marketingType) {
                  _.src = e.src
                  _.amount = Number(_.amount)
                  _.backgroundImg = e.backgroundImg
                }
              })
            })

            let list = []
            for (let i = 0; i < data.length; i++) {
              if (
                data[i].marketingType === 'SHARE' ||
                data[i].marketingType === 'GROUP' ||
                data[i].marketingType === 'DIS' ||
                data[i].marketingType === 'REPAY' ||
                data[i].marketingType === 'RECEIPT' ||
                data[i].marketingType === 'SECOND_KILL'
              ) {
                list.push(data[i])
              }
            }
            this.info = list
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  background: #eef2f5;
  .kong {
    width: 100%;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .list {
    width: 340px;
    height: 100px;
    margin: 0 auto 20px;
    // background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .backgroundImg {
      position: absolute;
      top: 0;
      width: 362px;
      height: 127px;
    }
    .listLeft {
      width: 70px;
      height: 50px;
      display: flex;
      align-items: center;
      margin: 0 10px;
      img {
        width: 60px;
        height: 50px;
      }
    }
    .listMiddle {
      width: 170px;
      font-size: 14px;
      color: #707070;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-45%, -50%);
      color: #000;
      z-index: 2;
      p {
        font-size: 16px;
      }
      span {
        width: 100%;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #5c6b77;
      }
    }
    .listPositioning {
      position: absolute;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      z-index: 2;
      width: 75px;
      p {
        color: #f32b0a;
        font-size: 15px;
      }
      span {
        font-size: 12px;
        padding: 3px;
        background: #fff;
        border-radius: 6px;
        color: #ffaf6b;
        display: block;
      }
    }
  }
}
</style>

